import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:full_display/common/qxp_color.dart';
import 'package:full_display/common/qxp_style.dart';
import 'package:full_display/provide/button_list_provider.dart';
import 'package:full_display/unit/asset_utils/asset_utils.dart';
import 'package:full_display/unit/screen/screen_utility.dart';
import 'package:full_display/unit/widgets/slider/slider_light_widget.dart';
import 'package:full_display/unit/widgets/widget_button_list.dart';
import 'package:full_display/unit/widgets/widget_media_list.dart';
import 'package:provider/provider.dart';

class CloudsClusterDetailPage extends StatefulWidget {
  const CloudsClusterDetailPage({super.key});

  @override
  State<CloudsClusterDetailPage> createState() =>
      _CloudsClusterDetailPageState();
}

class _CloudsClusterDetailPageState extends State<CloudsClusterDetailPage> {
  late ButtonListProvider _btnListData;
  ScrollController _scrollController = ScrollController();
  bool _switchValue = false;
  @override
  Widget build(BuildContext context) {
    _btnListData = context.watch<ButtonListProvider>();
    return Scaffold(
      backgroundColor: ColorPlate.background,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: ColorPlate.background,
        elevation: 0,
        title: Center(
          child: Text(
            '集群详情',
            textAlign: TextAlign.center,
            style: StandardTextStyle.textWhite16BoldStyle,
          ),
        ),
        leading: IconButton(
          icon: Image.asset(
              height: 20.0.H, width: 20.0.W, AssetUtils.getAsset2Image("back")),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        actions: [
          TextButton(
              onPressed: () {},
              child: Text(
                '新增WiFi',
                textAlign: TextAlign.center,
                style: StandardTextStyle.textWhite14Op75Style,
              ))
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(20.0.W),
        // child: Center(
        child: Column(
          children: [
            Text(
              'S6-6C2A2858AC',
              textAlign: TextAlign.center,
              style: StandardTextStyle.textWhite24BoldStyle,
            ),
            GestureDetector(
              onTap: () {},
              child: Container(
                margin: EdgeInsets.only(top: 10.0.H),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "离线",
                      style: StandardTextStyle.textWhite16BoldOp50Style,
                    ),
                    Container(
                      width: 8.0.H,
                    ),
                    Image.asset(
                        height: 20.0.H,
                        width: 20.0.W,
                        AssetUtils.getAsset2Image("icon_eye_open")),
                  ],
                ),
              ),
            ),
            Container(
              child: Column(
                children: [
                  Container(
                    height: 40.0.H,
                  ),
                  ButtonListWidget(
                    btnList: _btnListData.clusterBtnList,
                    tapAction: btnClick,
                    isBg: true,
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 20.0.H),
                    child: const SliderLightWidget(
                      title: '亮度调节',
                    ),
                  ),
                  Container(
                    height: 15.0.H,
                  ),
                  ButtonListWidget(
                    btnList: _btnListData.clusterOneBtnList,
                    tapAction: btnOneClick,
                    isBg: true,
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 15.0.H),
                    decoration: const BoxDecoration(
                      color: ColorPlate.backgroundOpacity5,
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                    ),
                    child: Column(
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 15.0.H, bottom: 15.0.H),
                          height: 180.0.W,
                          child: GridView.builder(
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 4,
                                    crossAxisSpacing: 20.0.W,
                                    mainAxisSpacing: 20.0.W),
                            scrollDirection: Axis.vertical,
                            controller: _scrollController,
                            itemCount: _btnListData.clusterInfoBtnList.length,
                            itemBuilder: (context, index) {
                              return _getItem(
                                  _btnListData.clusterInfoBtnList[index],
                                  index);
                            },
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 20.0.W, right: 20.0.W),
                          child: Divider(
                            height: 1.0,
                            color: ColorPlate.backgroundOpacity20,
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(
                              top: 15.0.H,
                              bottom: 15.0.H,
                              left: 20.0.W,
                              right: 20.0.W),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Text(
                                    '显示主要信息',
                                    style:
                                        StandardTextStyle.textWhite16BoldStyle,
                                  ),
                                  Container(
                                    width: 10.0.W,
                                  ),
                                  CupertinoSwitch(
                                    value: _switchValue,
                                    activeColor: ColorPlate.app_blue,
                                    trackColor: ColorPlate.white,
                                    //dragStartBehavior: DragStartBehavior.start,
                                    onChanged: (value) {
                                      //重新构建页面
                                      setState(() {
                                        _switchValue = value;
                                      });
                                    },
                                  ),
                                ],
                              ),
                              Text(
                                '高级功能',
                                style: StandardTextStyle.textWhite14Op75Style,
                              ),
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 15.0.H),
                          child: MedisListWidget(
                            info: "",
                            list: [],
                            h: 200,
                            clearData: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
          // ),
        ),
      ),
    );
  }

  void btnClick(int index, BuildContext context) {
    if (index == 0) {
    } else if (index == 1) {
    } else {}
  }

  void btnOneClick(int index, BuildContext context) {
    if (index == 0) {
    } else if (index == 1) {
    } else if (index == 2) {
    } else {}
  }

  Widget _getItem(Map data, int index) {
    // print("data ----> ${data}");
    return InkWell(
      onTap: () {},
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              height: 30.0.H,
              width: 30.0.W,
              AssetUtils.getAsset2Image(data['img'].toString()),
            ),
            Container(height: 10.0.H),
            Text(
              data['text'],
              style: StandardTextStyle.textWhite12Style,
            ),
          ],
        ),
      ),
    );
  }
}
